<template>
  <view class="search-history">
    <view v-if="listData.length" class="header">
      <view class="title">搜索历史</view>
      <u-icon name="trash" color="#999" size="20" @click="onClear" />
    </view>
    <view v-if="listData.length" class="list-wrap">
      <view v-for="(item, index) in listData" :key="index" class="item" @click="onToSearch(item.keyword)">
        {{ item.keyword }}
      </view>
    </view>
  </view>
</template>

<script>
import {
  wx_search_keyword_list,
  wx_search_keyword_del
} from '../../api/index'
export default {
  name: 'SearchHistory',
  data() {
    return {
      listData: []
    }
  },
  mounted() {
    this.geteSearchHistory()
  },
  methods: {
    async geteSearchHistory() {
      const data = await wx_search_keyword_list()
      this.listData = data.keywords.filter(e => e.keyword !== '')
    },

    onClear() {
      wx_search_keyword_del()
      this.geteSearchHistory()
      this.$emit('keyword:clear')
    },

    onToSearch(value) {
      this.$emit('keyword:update', value)
    }
  }
}
</script>

<style lang="scss" scoped>
	.search-history {
		.header {
			@include flex-between;
			padding: 20rpx;
		}

		.list-wrap {
			display: flex;
			flex-wrap: wrap;
			gap: 15rpx;
			padding: 0 20rpx;

			.item {
				width: max-content;
				height: 50rpx;
				padding: 0 20rpx;
				margin-bottom: 10rpx;
				border-radius: 50rpx;
				background-color: #d4d4d4;
				font-size: 24rpx;
				@include flex-center;
			}
		}

	}
</style>
